<html>
    <head>
        <meta charset="utf-8">
        
            <script src="lib/bindings/utils.js"></script>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            
        
<center>
<h1></h1>
</center>

<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
          crossorigin="anonymous"
        />
        <script
          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
          integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
          crossorigin="anonymous"
        ></script>


        <center>
          <h1></h1>
        </center>
        <style type="text/css">

             #mynetwork {
                 width: 100%;
                 height: 750px;
                 background-color: #ffffff;
                 border: 1px solid lightgray;
                 position: relative;
                 float: left;
             }

             

             

             
        </style>
    </head>


    <body>
        <div class="card" style="width: 100%">
            
            
            <div id="mynetwork" class="card-body"></div>
        </div>

        
        

        <script type="text/javascript">

              // initialize global variables.
              var edges;
              var nodes;
              var allNodes;
              var allEdges;
              var nodeColors;
              var originalNodes;
              var network;
              var container;
              var options, data;
              var filter = {
                  item : '',
                  property : '',
                  value : []
              };

              

              

              // This method is responsible for drawing the graph, returns the drawn network
              function drawGraph() {
                  var container = document.getElementById('mynetwork');

                  

                  // parsing and collecting nodes and edges from the python
                  nodes = new vis.DataSet([{"color": "#FFA07A", "id": "StopEvent", "label": "StopEvent", "shape": "ellipse"}, {"color": "#ADD8E6", "id": "_done", "label": "_done", "shape": "box"}, {"color": "#ADD8E6", "id": "account_balance", "label": "account_balance", "shape": "box"}, {"color": "#90EE90", "id": "AccountBalanceEvent", "label": "AccountBalanceEvent", "shape": "ellipse"}, {"color": "#ADD8E6", "id": "authenticate", "label": "authenticate", "shape": "box"}, {"color": "#90EE90", "id": "AuthenticateEvent", "label": "AuthenticateEvent", "shape": "ellipse"}, {"color": "#ADD8E6", "id": "concierge", "label": "concierge", "shape": "box"}, {"color": "#90EE90", "id": "ConciergeEvent", "label": "ConciergeEvent", "shape": "ellipse"}, {"color": "#E27AFF", "id": "StartEvent", "label": "StartEvent", "shape": "ellipse"}, {"color": "#ADD8E6", "id": "initialize", "label": "initialize", "shape": "box"}, {"color": "#90EE90", "id": "InitializeEvent", "label": "InitializeEvent", "shape": "ellipse"}, {"color": "#ADD8E6", "id": "orchestrator", "label": "orchestrator", "shape": "box"}, {"color": "#90EE90", "id": "OrchestratorEvent", "label": "OrchestratorEvent", "shape": "ellipse"}, {"color": "#ADD8E6", "id": "stock_lookup", "label": "stock_lookup", "shape": "box"}, {"color": "#90EE90", "id": "StockLookupEvent", "label": "StockLookupEvent", "shape": "ellipse"}, {"color": "#ADD8E6", "id": "transfer_money", "label": "transfer_money", "shape": "box"}, {"color": "#90EE90", "id": "TransferMoneyEvent", "label": "TransferMoneyEvent", "shape": "ellipse"}]);
                  edges = new vis.DataSet([{"arrows": "to", "from": "StopEvent", "to": "_done"}, {"arrows": "to", "from": "StopEvent", "to": "_done"}, {"arrows": "to", "from": "account_balance", "to": "AuthenticateEvent"}, {"arrows": "to", "from": "account_balance", "to": "ConciergeEvent"}, {"arrows": "to", "from": "AccountBalanceEvent", "to": "account_balance"}, {"arrows": "to", "from": "authenticate", "to": "ConciergeEvent"}, {"arrows": "to", "from": "AuthenticateEvent", "to": "authenticate"}, {"arrows": "to", "from": "concierge", "to": "InitializeEvent"}, {"arrows": "to", "from": "concierge", "to": "StopEvent"}, {"arrows": "to", "from": "concierge", "to": "OrchestratorEvent"}, {"arrows": "to", "from": "ConciergeEvent", "to": "concierge"}, {"arrows": "to", "from": "StartEvent", "to": "concierge"}, {"arrows": "to", "from": "initialize", "to": "ConciergeEvent"}, {"arrows": "to", "from": "InitializeEvent", "to": "initialize"}, {"arrows": "to", "from": "orchestrator", "to": "ConciergeEvent"}, {"arrows": "to", "from": "orchestrator", "to": "StockLookupEvent"}, {"arrows": "to", "from": "orchestrator", "to": "AuthenticateEvent"}, {"arrows": "to", "from": "orchestrator", "to": "AccountBalanceEvent"}, {"arrows": "to", "from": "orchestrator", "to": "TransferMoneyEvent"}, {"arrows": "to", "from": "orchestrator", "to": "StopEvent"}, {"arrows": "to", "from": "OrchestratorEvent", "to": "orchestrator"}, {"arrows": "to", "from": "stock_lookup", "to": "ConciergeEvent"}, {"arrows": "to", "from": "StockLookupEvent", "to": "stock_lookup"}, {"arrows": "to", "from": "transfer_money", "to": "AuthenticateEvent"}, {"arrows": "to", "from": "transfer_money", "to": "AccountBalanceEvent"}, {"arrows": "to", "from": "transfer_money", "to": "ConciergeEvent"}, {"arrows": "to", "from": "TransferMoneyEvent", "to": "transfer_money"}]);

                  nodeColors = {};
                  allNodes = nodes.get({ returnType: "Object" });
                  for (nodeId in allNodes) {
                    nodeColors[nodeId] = allNodes[nodeId].color;
                  }
                  allEdges = edges.get({ returnType: "Object" });
                  // adding nodes and edges to the graph
                  data = {nodes: nodes, edges: edges};

                  var options = {
    "configure": {
        "enabled": false
    },
    "edges": {
        "color": {
            "inherit": true
        },
        "smooth": {
            "enabled": true,
            "type": "dynamic"
        }
    },
    "interaction": {
        "dragNodes": true,
        "hideEdgesOnDrag": false,
        "hideNodesOnDrag": false
    },
    "physics": {
        "enabled": true,
        "stabilization": {
            "enabled": true,
            "fit": true,
            "iterations": 1000,
            "onlyDynamicEdges": false,
            "updateInterval": 50
        }
    }
};

                  


                  

                  network = new vis.Network(container, data, options);

                  

                  

                  


                  

                  return network;

              }
              drawGraph();
        </script>
    </body>
</html>